import {
  EditTwoTone,
  HighlightTwoTone,
  LikeOutlined,
  MessageOutlined,
  PlusCircleTwoTone,
  StarOutlined,
  UserOutlined,
  VideoCameraTwoTone,
} from '@ant-design/icons';
import { ProCard, ProList } from '@ant-design/pro-components';
import { Button, Input, Tag } from 'antd';
import React from 'react';
import { Link, useIntl } from 'umi';
import styles from './index.less';

const { Search } = Input;
const { Divider } = ProCard;

const IconText = ({ icon, text }: { icon: any; text: string }) => (
  <span>
    {React.createElement(icon, { style: { marginRight: 8 } })}
    {text}
  </span>
);

const dataSource = [
  {
    title: '语雀的天空',
  },
  {
    title: 'Ant Design',
  },
  {
    title: '蚂蚁金服体验科技',
  },
  {
    title: 'TechUI',
  },
];

const creatorTitle: React.FC = (
  <div>
    <UserOutlined style={{ fontsize: 18, color: 'blue' }} />
    创作中心 Lv1
  </div>
);

const Community: React.FC = () => {
  const intl = useIntl();

  const onSearch = (searchText: string) => {
    console.log(searchText);
  };
  const blogId = 1;
  const blogUrl = '/community/' + blogId;

  return (
    <ProCard split="vertical">
      <ProCard colSpan="70%">
        <ProList<{ title: string }>
          toolBarRender={() => {
            return [<Search key="search" placeholder="搜索发现" onSearch={onSearch} enterButton />];
          }}
          itemLayout="vertical"
          rowKey="id"
          headerTitle="首页"
          dataSource={dataSource}
          metas={{
            title: {},
            description: {
              //tags
              render: () => (
                <>
                  <Tag>语雀专栏</Tag>
                  <Tag>设计语言</Tag>
                  <Tag>蚂蚁金服</Tag>
                </>
              ),
            },
            avatar: {
              //作者
              render: () => <>zmy</>,
            },
            actions: {
              render: () => [
                <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
              ],
            },
            extra: {
              render: () => (
                <img
                  width={272}
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              ),
            },
            content: {
              render: () => {
                //博文简介
                return (
                  <Link to={blogUrl}>
                    <div>
                      段落示意：蚂蚁金服设计平台
                      design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
                      design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
                    </div>
                  </Link>
                );
              },
            },
          }}
        />
      </ProCard>
      <ProCard split="horizontal">
        <ProCard.Group direction="column" title={creatorTitle} extra="草稿箱（1）">
          <ProCard direction="vertical">
            <div class={styles.creatorContainer}>
              <div className={styles.creatorIcon}>
                <PlusCircleTwoTone style={{ fontSize: 40 }} />
                回答问题
              </div>
              <div className={styles.creatorIcon}>
                <VideoCameraTwoTone style={{ fontSize: 40 }} twoToneColor="#FF9607" />
                发视频
              </div>
              <div className={styles.creatorIcon}>
                <EditTwoTone style={{ fontSize: 40 }} twoToneColor="#f4c807" />
                写文章
              </div>
              <div className={styles.creatorIcon}>
                <HighlightTwoTone style={{ fontSize: 40 }} twoToneColor="#26bfbf" />
                写想法
              </div>
            </div>
          </ProCard>
          <ProCard.Group bodyStyle={{ padding: 20 }}>
            <ProCard bodyStyle={{ backgroundColor: '#8590a60d' }}>
              <div style={{ display: 'flex', justifyContent: 'center' }}>今日阅读(播放)数</div>
              <strong style={{ display: 'flex', justifyContent: 'center', fontSize: '24px' }}>
                0
              </strong>
              <span style={{ display: 'flex', justifyContent: 'center' }}>昨日播放 0</span>
            </ProCard>
            <ProCard bodyStyle={{ backgroundColor: '#8590a60d' }}>
              <div style={{ display: 'flex', justifyContent: 'center' }}>今日新增赞同数</div>
              <strong style={{ display: 'flex', justifyContent: 'center', fontSize: '24px' }}>
                0
              </strong>
              <span style={{ display: 'flex', justifyContent: 'center' }}>昨日新增 0</span>
            </ProCard>
          </ProCard.Group>
          <ProCard>
            <Button size="large" style={{ width: '100%', height: '100%' }}>
              进入创作中心
            </Button>
          </ProCard>
        </ProCard.Group>
      </ProCard>
    </ProCard>
  );
};

export default Community;
